<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>cssCharts.js - jquery css charts</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <link rel="stylesheet" href="cssCharts.css">
        <script src="jquery.chart.js"></script>

        <style>
          /* page specific styles*/
          h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
          h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
          hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}

          .desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
          .desc a{color:blue;}
          .wrap{margin:0 auto;width:640px;padding-bottom:100px;}
          #line{width:400px;}
          /* page specific styles*/
        </style>
    </head>
    <body>
      <div class="wrap">

        <div class="desc">
          <h1>cssCharts.js plugin</h1><p>by
          <a href="http://twitter.com/thysultan">@thysultan</a> on
          <a href="https://github.com/sultantarimo/cssCharts.js">github</a>
        </p>
        </div>

        <h2>bar chart</h2>
        <hr>

        <div class="chart">
            <ul class="bar-chart" data-bars="[4,2],[4,5],[8,3],[4,2],[4,2]" data-max="10" data-unit="k" data-width="24"></ul>
        </div>
        <!-- data max is the 100% point of the graph -->
        <!-- set data-grid to 0 for no grid -->
        <!-- data-width is the individual bars width -->

        <h2>donut chart v1</h2>
        <hr>

        <div class="chart">
          <div class="donut-chart" data-percent="0.61" data-title="uptime %"></div>
        </div>

        <h2>donut chart v2</h2>
        <hr>

        <div class="chart">
          <div class="donut-chart fill" data-percent="0.61" data-title="uptime %"></div>
        </div>

        <h2>donut chart v2</h2>
        <hr>

        <div class="chart">
          <div class="donut-chart pie-chart fill" data-percent="0.61" data-title="uptime %"></div>
        </div>
        <!-- pie-chart class for pie chart -->
        <!-- fill class for default donut fill enabled-->

        <h2>line chart v1</h2>
        <hr>

        <div class="chart">
          <ul data-cord="[[0,70,120,160,200,262,280,340,380,420,460],[140,150,40,90,40,60,120,20,60,90,10]],[[0,70,120,160,200,262,280,340,380,420,460],[200,190,80,130,80,100,160,60,100,130,50]]"  class="line-chart"></ul>
        </div>
        <!-- multiple graphs [[x cords],[y cords]] [[x cords],[y cords]] -->

        <h2>line chart v2</h2>
        <hr>

        <div class="chart" id="line">
          <ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
        </div>

        <h2>line chart v3</h2>
        <hr>

        <div class="chart dotted">
          <ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
        </div>

        <h2>line chart v4</h2>
        <hr>

        <div class="chart dotted">
          <ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" data-fill="1" class="line-chart no-points"></ul>
        </div>
        <!-- single graph [x cords],[y cords] -->


        <br><br><br>
        <h2>pie chart v1</h2>
        <hr>

        <div class="chart">
          <div class="pie-thychart" data-set='[["people", 20], ["countries",30], ["developers",60]]' data-colors="#FBE4DB,#F17F49,#BD380F"></div>
        </div>

      </div>

      <script>
        $(function() {
            $('.bar-chart').cssCharts({type:"bar"});
            $('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
            $('.line-chart').cssCharts({type:"line"});

            $('.pie-thychart').cssCharts({type:"pie"});
        });
      </script>
    </body>
</html>